<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Repeating element</title>
    <style>
        @page {
            size: 820px;
        }
        @-epubx-page-template {
            .partition {
                width: 398px;
                height: 198px;
                border: rgba(0, 0, 255, 0.2) solid 1px;
                -epubx-flow-from: body;
            }
            .left {
                left: 10px;
            }
            .right {
                right: 10px;
            }

            @-epubx-page-master {
                @-epubx-partition {
                    bottom: 0;
                    left: 0;
                    right: 0;
                    height: 10px;
                    font-size: 10px;
                    line-height: 10px;
                    text-align: center;
                    content: counter(page);
                }
                @-epubx-partition class(partition) class(right) {
                    top: 610px;
                }
                @-epubx-partition class(partition) class(right) {
                    top: 410px;
                }
                @-epubx-partition class(partition) class(right) {
                    top: 210px;
                }
                @-epubx-partition class(partition) class(right) {
                    top: 10px;
                }
                @-epubx-partition class(partition) class(left) {
                    top: 610px;
                }
                @-epubx-partition class(partition) class(left) {
                    top: 410px;
                }
                @-epubx-partition class(partition) class(left) {
                    top: 210px;
                }
                @-epubx-partition class(partition) class(left) {
                    top: 10px;
                }
            }
        }
        :root {
            font-size: 10px;
            line-height: 12px;
            widows: 1;
            orphans: 1;
        }
        body {
            margin: 0 10px;
        }
        section {
            break-after: column;
        }
        h1 {
          font-size: 10px;
          font-weight: normal;
        }

        .header {
            repeat-on-break: header;
            background-color: #FF9999 !important;
        }
        .footer {
            repeat-on-break: footer;
            background-color: #9999FF !important;
        }

        .auto {
            repeat-on-break: auto;
        }
        .thead {
            display: table-header-group;
        }
        .tfoot {
            display: table-footer-group;
        }

        .box {
            height: 30px;
            border: 1px solid #999;
            margin: 2px;
            padding: 2px;
        }
        .child {
            padding: 10px;
            margin: 2px;
            border: 1px solid #999;
            background-color: #ddd;
        }
        .child .box {
            background-color: #FFF;
            height: 20px;
        }

        table {
            border: 2px black solid;
            border-spacing: 2px;
        }
        caption {
            caption-side: bottom;
        }
        tr, .tr {
            border: 1px blue solid;
        }
        th, td, .th, .td {
            border: 1px gray solid;
            line-height: 16px;
            vertical-align: top;
        }
        td {
        }
        thead, .thead {
            background-color: #FFAAAA;
        }
        tfoot, .tfoot {
            background-color: #AAAAFF;
        }
    </style>
</head>
<body>


    <section>
        <h1>(1) Nested div -> table</h1>

        <div>
            <div class="box header">this is header of parent</div>
            <div class="box footer">this is footer of parent</div>
            <table class="table1">
                <thead>
                    <tr>
                        <td>header 1</td>
                        <td>header 2</td>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <td>footer 1</td>
                        <td>footer 2</td>
                    </tr>
                </tfoot>
                <tbody>
                    <tr>
                        <td>cell 1-1</td>
                        <td>cell 1-2</td>
                    </tr>
                    <tr>
                        <td>cell 2-1</td>
                        <td>cell 2-2</td>
                    </tr>
                </tbody>
            </table>
            <table class="table2">
                <thead>
                    <tr>
                        <td>header 1</td>
                        <td>header 2</td>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <td>footer 1</td>
                        <td>footer 2</td>
                    </tr>
                </tfoot>
                <tbody>
                    <tr>
                        <td>cell 1-1</td>
                        <td>cell 1-2</td>
                    </tr>
                    <tr>
                        <td>cell 2-1</td>
                        <td>cell 2-2</td>
                    </tr>
                    <tr>
                        <td>cell 3-1</td>
                        <td>cell 3-2</td>
                    </tr>
                    <tr>
                        <td>cell 4-1</td>
                        <td>cell 4-2</td>
                    </tr>
                    <tr>
                        <td>cell 5-1</td>
                        <td>cell 5-2</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </section>

    <section>Empty</section>

    <section>
        <h1>(2) Nested div -> table / dropping header,footer</h1>

        <div>
            <div class="box header">this is header of parent</div>
            <div class="box footer">this is footer of parent</div>
            <table class="table1">
                <thead>
                    <tr>
                        <td>header 1</td>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <td>footer 1</td>
                    </tr>
                </tfoot>
                <tbody>
                    <tr>
                        <td><div style='height:120px'>drop child footer, and parent header, footer</div></td>
                    </tr>
                    <tr>
                        <td><div style='height:80px'>drop child footer</div></td>
                    </tr>
                    <tr>
                        <td><div style='height:100px'>drop child header, footer</div></td>
                    </tr>
                    <tr>
                        <td><div style='height:130px'>drop child header, footer and parent footer</div></td>
                    </tr>
                    <tr>
                        <td><div style='height:190px'>drop child header, footer and parent header, footer</div></td>
                    </tr>
                    <tr>
                        <td><div style='height:155px'>drop child header, and parent header, footer</div></td>
                    </tr>
                </tbody>
            </table>
            <div class="box">parent content 3</div>
        </div>
    </section>

    <section>
        <h1>(3) Nested table -> div</h1>

        <table class="table1">
            <thead>
                <tr>
                    <td>header 1</td>
                    <td>header 2</td>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <td>footer 1</td>
                    <td>footer 2</td>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <td>
                      <div class="child1">
                          <div class="box header">this is header of child1</div>
                          <div class="box footer">this is footer of child1</div>
                          <div>child1 content1</div>
                          <div>child1 content2</div>
                          <div>child1 content3</div>
                          <div>child1 content4</div>
                          <div>child1 content5</div>
                          <div>child1 content6</div>
                          <div>child1 content7</div>
                          <div>child1 content8</div>
                          <div>child1 content9</div>
                          <div>child1 content10</div>
                      </div>
                    </td>
                    <td>
                      <div class="child2">
                          <div class="box header">this is header of child2</div>
                          <div class="box footer">this is footer of child2</div>
                          <div>child2 content1</div>
                          <div>child2 content2</div>
                          <div>child2 content3</div>
                          <div>child2 content4</div>
                          <div>child2 content5</div>
                      </div>
                    </td>
                </tr>
                <tr>
                    <td>cell 2-1</td>
                    <td>cell 2-2</td>
                </tr>
            </tbody>
        </table>
    </section>

    <section>Empty</section>

    <section>
        <h1>(4) Nested table -> div / dropping header,footer</h1>

        <table class="table1">
            <thead>
                <tr>
                    <td>header 1</td>
                    <td style="width:80px;">header 2</td>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <td>footer 1</td>
                    <td>footer 2</td>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                  <td>
                    <div class="child2">
                        <div class="box header">this is header of child</div>
                        <div class="box footer">this is footer of child</div>
                        <div class="b1" style='height:120px'>drop child footer, and parent footer</div>
                        <div class="b2" style='height:100px'>drop child footer</div>
                        <div class="b3" style='height:120px'>drop child header, footer</div>
                        <div class="b4" style='height:170px'>drop child header, footer and parent footer</div>
                        <div class="b5" style='height:190px'>drop child header, footer and parent header, footer</div>
                        <div class="b6" style='height:155px'>drop child header, and parent header, footer</div>
                    </div>
                  </td>
                  <td>
                    cell 1-2
                  </td>
                </tr>
                <tr>
                    <td>cell 2-1</td>
                    <td>cell 2-2</td>
                </tr>
            </tbody>
        </table>
    </section>

    <section>
        <h1>(5) Nested table -> table</h1>

        <table class="table1">
            <thead>
                <tr>
                    <td>header 1</td>
                    <td>header 2</td>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <td>footer 1</td>
                    <td>footer 2</td>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                  <td>
                    <table class="child1">
                        <thead>
                            <tr>
                                <td>header 1</td>
                                <td>header 2</td>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <td>footer 1</td>
                                <td>footer 2</td>
                            </tr>
                        </tfoot>
                        <tbody>
                            <tr>
                                <td>cell 1-1</td>
                                <td>cell 1-2</td>
                            </tr>
                            <tr>
                                <td>cell 2-1</td>
                                <td>cell 2-2</td>
                            </tr>
                            <tr>
                                <td>cell 3-1</td>
                                <td>cell 3-2</td>
                            </tr>
                            <tr>
                                <td>cell 4-1</td>
                                <td>cell 4-2</td>
                            </tr>
                            <tr>
                                <td>cell 5-1</td>
                                <td>cell 5-2</td>
                            </tr>
                            <tr>
                                <td>cell 6-1</td>
                                <td>cell 6-2</td>
                            </tr>
                            <tr>
                                <td>cell 7-1</td>
                                <td>cell 7-2</td>
                            </tr>
                            <tr>
                                <td>cell 7-1</td>
                                <td>cell 7-2</td>
                            </tr>
                            <tr>
                                <td>cell 7-1</td>
                                <td>cell 7-2</td>
                            </tr>
                        </tbody>
                    </table>
                  </td>
                  <td>
                     <table class="child2">
                        <thead>
                            <tr>
                                <td>header 1</td>
                                <td>header 2</td>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <td>footer 1</td>
                                <td>footer 2</td>
                            </tr>
                        </tfoot>
                        <tbody>
                            <tr>
                                <td>cell 1-1</td>
                                <td>cell 1-2</td>
                            </tr>
                            <tr>
                                <td>cell 2-1</td>
                                <td>cell 2-2</td>
                            </tr>
                            <tr>
                                <td>cell 3-1</td>
                                <td>cell 3-2</td>
                            </tr>
                            <tr>
                                <td>cell 4-1</td>
                                <td>cell 4-2</td>
                            </tr>
                            <tr>
                                <td>cell 5-1</td>
                                <td>cell 5-2</td>
                            </tr>
                        </tbody>
                    </table>
                  </td>
                </tr>
                <tr>
                    <td>cell 2-1</td>
                    <td>cell 2-2</td>
                </tr>
            </tbody>
        </table>
    </section>


    <section>Empty</section>

    <section>
        <h1>(7) Nested table -> table / dropping header,footer</h1>

        <table class="table1">
            <thead>
                <tr>
                    <td>header 1</td>
                    <td style="width:80px;">header 2</td>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <td>footer 1</td>
                    <td>footer 2</td>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                  <td>
                    <table class="table1">
                        <thead>
                            <tr>
                                <td>header 1</td>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <td>footer 1</td>
                            </tr>
                        </tfoot>
                        <tbody>
                            <tr>
                                <td><div style='height:130px'>drop child footer, and parent header, footer</div></td>
                            </tr>
                            <tr>
                                <td><div style='height:120px'>drop child footer</div></td>
                            </tr>
                            <tr>
                                <td><div style='height:140px'>drop child header, footer</div></td>
                            </tr>
                            <tr>
                                <td><div style='height:155px'>drop child header, footer and parent footer</div></td>
                            </tr>
                            <tr>
                                <td><div style='height:190px'>drop child header, footer and parent header, footer</div></td>
                            </tr>
                            <tr>
                                <td><div style='height:155px'>drop child header, and parent header, footer</div></td>
                            </tr>
                        </tbody>
                    </table>
                  </td>
                  <td>cell 1-2</td>
                </tr>
                <tr>
                    <td>cell 2-1</td>
                    <td>cell 2-2</td>
                </tr>
            </tbody>
        </table>
    </section>

    <section>
        <h1>(8) table cell contains header/footer with different height </h1>
        <table class="table1">
            <thead>
                <tr>
                    <td>header 1</td>
                    <td>header 2</td>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <td>footer 1</td>
                    <td>footer 2</td>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <td>
                      <div class="child1">
                          <div class="box header" style="height: 70px">this is header of child1</div>
                          <div class="box footer" style="height: 70px">this is footer of child1</div>
                          <div>child1 content1</div>
                          <div>child1 content2</div>
                          <div>child1 content3</div>
                          <div>child1 content4</div>
                          <div>child1 content5</div>
                      </div>
                    </td>
                    <td>
                      <div class="child2">
                          <div class="box header">this is header of child2</div>
                          <div class="box footer">this is footer of child2</div>
                          <div>child2 content1</div>
                          <div>child2 content2</div>
                          <div>child2 content3</div>
                          <div>child2 content4</div>
                          <div>child2 content5</div>
                          <div>child2 content6</div>
                          <div>child2 content7</div>
                          <div>child2 content8</div>
                      </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </section>

    <section>
        <h1>(9) table colspan </h1>
        <table class="table1">
            <thead>
                <tr>
                    <td>header1</td>
                    <td>header2</td>
                    <td>header3</td>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <td>footer1</td>
                    <td>footer2</td>
                    <td>footer3</td>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <td colspan="2">
                      <div class="child1-1">
                          <div class="box header" style="height: 20px">this is header of child1-1</div>
                          <div class="box footer" style="height: 40px">this is footer of child1-1</div>
                          <div>child1-1 content1</div>
                          <div>child1-1 content2</div>
                          <div>child1-1 content3</div>
                          <div>child1-1 content4</div>
                      </div>
                    </td>
                    <td>
                      <div class="child1-2">
                          <div class="box header" style="height: 10px">this is header of child1-2</div>
                          <div class="box footer" style="height: 20px">this is footer of child1-2</div>
                          <div>child1-2 content1</div>
                          <div>child1-2 content2</div>
                          <div>child1-2 content3</div>
                          <div>child1-2 content4</div>
                          <div>child1-2 content5</div>
                          <div>child1-2 content6</div>
                          <div>child1-2 content7</div>
                          <div>child1-2 content8</div>
                      </div>
                    </td>
                </tr>
                <tr>
                    <td>
                      <div class="child2-1">
                          <div class="box header" style="height: 15px">this is header of child2-1</div>
                          <div class="box footer" style="height: 35px">this is footer of child2-1</div>
                          <div>child2-1 content1</div>
                          <div>child2-1 content2</div>
                          <div>child2-1 content3</div>
                          <div>child2-1 content4</div>
                          <div>child2-1 content5</div>
                          <div>child2-1 content6</div>
                          <div>child2-1 content7</div>
                          <div>child2-1 content8</div>
                      </div>
                    </td>
                    <td colspan="2">
                      <div class="child2-2">
                          <div class="box header" style="height: 25px">this is header of child1</div>
                          <div class="box footer" style="height: 35px">this is footer of child1</div>
                          <div>child2-2 content1</div>
                          <div>child2-2 content2</div>
                          <div>child2-2 content3</div>
                          <div>child2-2 content4</div>
                          <div>child2-2 content5</div>
                      </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </section>


    <section>
        <h1>(10) table rowspan </h1>
        <table class="table1">
            <thead>
                <tr>
                    <td>header1</td>
                    <td>header2</td>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <td>footer1</td>
                    <td>footer2</td>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <td rowspan="2">
                      <div class="child1-1">
                          <div class="box header" style="height: 20px">header of child1-1</div>
                          <div class="box footer" style="height: 40px">footer of child1-1</div>
                          <div>child1-1 content1</div>
                          <div>child1-1 content2</div>
                          <div>child1-1 content3</div>
                          <div>child1-1 content4</div>
                          <div>child1-1 content5</div>
                          <div>child1-1 content6</div>
                          <div>child1-1 content7</div>
                          <div>child1-1 content8</div>
                          <div>child1-1 content9</div>
                      </div>
                    </td>
                    <td>
                      <div class="child1-2">
                          <div class="box header" style="height: 10px">header of child1-2</div>
                          <div class="box footer" style="height: 20px">footer of child1-2</div>
                          <div>child1-2 content1</div>
                          <div>child1-2 content2</div>
                          <div>child1-2 content3</div>
                          <div>child1-2 content4</div>
                          <div>child1-2 content5</div>
                          <div>child1-2 content6</div>
                          <div>child1-2 content7</div>
                      </div>
                    </td>
                </tr>
                <tr>
                    <td>
                      <div class="child2-2">
                          <div class="box header" style="height: 25px">header of child1</div>
                          <div class="box footer" style="height: 35px">footer of child1</div>
                          <div>child2-2 content1</div>
                          <div>child2-2 content2</div>
                          <div>child2-2 content3</div>
                          <div>child2-2 content4</div>
                          <div>child2-2 content5</div>
                          <div>child2-2 content6</div>
                          <div>child2-2 content7</div>
                      </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </section>


</body>
</html>
